<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>flex 子项目分配剩余空间</title>
        <style>
            h1 {
                font: bold 20px/1.5 georgia, simsun, sans-serif;
            }
            .box {
                display: -webkit-flex;
                /* flex 将元素都设置为弹性盒模型对象 */
                display: flex;
                /* width: 400px; */
                height: 100px;
                margin: 10px 0 0;
                padding: 0;
                border-radius: 5px;
                list-style: none;
                background-color: pink;
            }
            .box li {
                background: #aaa;
                text-align: center;
                margin: 5px;
            }
            .box li:nth-child(1) {
                background: #999;
            }
            .box li:nth-child(2) {
                background: #aaa;
            }
            .box li:nth-child(3) {
                background: #ccc;
            }
            #box li:nth-child(1) {
                -webkit-flex: 1;
                flex: 1;
            }
            #box li:nth-child(2) {
                -webkit-flex: 1;
                flex: 1;
            }
            #box li:nth-child(3) {
                -webkit-flex: 1;
                flex: 1;
            }
            #box2 li:nth-child(1) {
                -webkit-flex: 1 0 100px;
                flex: 1 0 100px;
            }
            #box2 li:nth-child(2) {
                -webkit-flex: 2 0 100px;
                flex: 2 0 100px;
            }
            #box2 li:nth-child(3) {
                -webkit-flex: 3 0 100px;
                flex: 3 0 100px;
            }
            #box3 li:nth-child(1) {
                -webkit-flex: 1 1 400px;
                flex: 1 1 400px;
            }
            #box3 li:nth-child(2) {
                -webkit-flex: 1 2 400px;
                flex: 1 2 400px;
            }
            #box3 li:nth-child(3) {
                -webkit-flex: 1 2 400px;
                flex: 1 2 400px;
            }
        </style>
    </head>

    <body>
        <h1>flex示例：</h1>

        <ul id="box" class="box">
            <li>flex:1;</li>
            <li>flex:1;</li>
            <li>flex:1;</li>
        </ul>

        <ul id="box2" class="box">
            <li>flex:1 0 100px;</li>
            <li>flex:2 0 100px;</li>
            <li>flex:3 0 100px;</li>
        </ul>

        <ul id="box3" class="box">
            <li>flex:1 1 400px;</li>
            <li>flex:1 2 400px;</li>
            <li>flex:1 2 400px;</li>
        </ul>
    </body>
</html>
